<template>
  <section class="dg-art">
    <div class="am-tabs" id="doc-my-tabs">
      <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
        <li v-for="(item, index) in tabs" :key="index"
            :class="{ 'am-active': curTab === index }" @click="curTab = index">
          <router-link :to="'/personal/panel/' + item.tab">{{ item.name }}</router-link>
        </li>
      </ul>
      <div class="am-tabs-bd">
        <div class="am-tab-panel am-active">
          <transition name="fade" mode="out-in">
            <router-view :designerID="designerID" />
          </transition>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'panel',
  data() {
    return {
      curTab: 0,// 选项卡index
      designerID: '' + this.$store.state.designer.designerID
    }
  },
  props: {
    tabs: {// 选项
      type: Array,
      default() {
        return [];
      },
      required: false
    },
  },
  mounted() {
    this.$router.push('/personal/panel/table');
  }
}
</script>

<style>
.am-tabs-bd { border: 0 !important; }
</style>